<template>
	<el-row :gutter="20">
		<el-col :xl="12" :lg="24">
			<div :id="chartsId" class="my-chart"></div>
		</el-col>
		<el-col :xl="12" :lg="24">
			<div id="chartsId11" class="my-chart"></div>
		</el-col>
	</el-row>
</template>
<style lang="scss" scoped>
.my-chart{
	width: 800px;
	height: 500px;
	box-shadow: 0px 0px 2px 4px #ccc,-0px -0px 2px 4px #ccc;
}
</style>

<script>
export default {
  props: ['chartsId', 'data'],
  data(){
    return {
		}
  },
  mounted(){
    this.desc();
  },
  watch: {
      data: function(){
          this.desc();
      }
  },
  methods: {
    desc(){
      let myData = this.data;//获取数据 
			let endTime = this.data.endTime;
      let myChart = this.$echarts.init(document.getElementById(this.chartsId));
      let myChart11 = this.$echarts.init(document.getElementById('chartsId11'));
      myChart.setOption({
				title: {
					text: '汽车总销量图'
				},
				color: ['#2f4553', '#c23532'],
        tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'cross',
            crossStyle: {
                color: '#999'
            }
        }
      },
			dataZoom: [
        {
					show: true, 
					height: 30, 
					xAxisIndex: [
							0
					], 
					bottom:20,
					startValue: 5,
					endValue:12
        },
				{
					type: 'inside', 
					show: true, 
					height: 15, 
					xAxisIndex: [
							0
					], 
					start: 50, 
					end: 3100
        }
    	], 
      legend: {
          data:['去年当月','当年当月']
      },
			grid: {
				bottom: 100
			},
      xAxis: [
          {
						type: 'category',
						data: function(){
								let list = [];
								let year = new Date(endTime).getFullYear();//当前年
								let month = new Date(endTime).getMonth()+1;//当前月
								//生成x轴坐标
								list.unshift(year + '-' + month);
								for(let i = 1; i < 24; i++){
									if((month-1)%12 == 0) --year;
									month = Math.abs((month-1) % 12);
									
									if(month == 0) month = 12;
									let item = year + '-' + month;
									list.unshift(item);
								}
								return list;
						}(),
						axisPointer: {
								type: 'shadow'
						},
						axisLabel: {
								interval: 0,
								rotate: -30
						}
          }
      ],
      yAxis: [
          {
              type: 'value',
              name: '销量',
              axisLabel: {
                  formatter: '{value} 辆'
              }
          },
      ],
      series: [
          {
              name:'去年当月',
              type:'bar',
              data:myData.lastYear_MonthSales,
              barGap: '10%',
              barWidth: '30%'
          },{
              name:'当年当月',
              type:'bar',
              data: myData.theYear_MonthSales,
              barGap: '10%',
              barWidth: '30%'
          },
      ]
    });
		myChart11.setOption({
			title: {
					text: '同环比变化图'
			},
			legend:{
				data: ['同比增长率', '环比增长率']
			},
			dataZoom: [
        {
					show: true, 
					height: 30, 
					xAxisIndex: [
							0
					], 
					bottom:20,
					startValue: 5,
					endValue:12
        },
				{
					type: 'inside', 
					show: true, 
					height: 15, 
					xAxisIndex: [
							0
					], 
					start: 50, 
					end: 3100
        }
    	], 
			grid: {
				bottom: 100
			},
			tooltip: {
					trigger: 'axis'
			},
			xAxis: {
					type: 'category',
					data: function(){
							let list = [];
							let year = new Date(endTime).getFullYear();//当前年
							let month = new Date(endTime).getMonth()+1;//当前月
							//生成x轴坐标
							list.unshift(year + '-' + month);
							for(let i = 1; i < 24; i++){
								if((month-1)%12 == 0) --year;
								month = Math.abs((month-1) % 12);
								
								if(month == 0) month = 12;
								let item = year + '-' + month;
								list.unshift(item);
							}
							return list;
					}(),
					axisPointer: {
							type: 'shadow'
					},
					axisLabel: {
							interval: 0,
							rotate: -30
					}
			},
			yAxis: {
					type: 'value',
					name: '同、环比',
					axisLabel: {
							formatter: '{value} %'
					}
			},
			series: [
				{
					name:'同比增长率',
					type:'line',
					data:myData.theYear_MonthSales_yoy,
					barGap: '10%',
					barWidth: '30%'
			},
			{
					name:'环比增长率',
					type:'line',
					data:myData.theYear_MonthSales_mom,
					barGap: '10%',
					barWidth: '30%'
			}
			]
		})
    }
  }
}
</script>
